<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="zepto.js"></script>
  <script src="parabola.js"></script>
  <style>
	 .boll{position:absolute;left:100px;top:350px;border-radius:50px;width:50px;height:50px;background:red;}
	 .target{position:absolute;left:600px;top:180px;border-radius:50px;width:50px;height:50px;background:#CDCDCD;}
  </style>
 </head>
 <body>
	<div class="btns" style="margin-top:20px">
		<a href="#" id="reset">重置</a>
		<a href="#" id="run">开始运动</a>
		<a href="#" id="stop">停止运动</a>
		<a href="#" id="setOptions">设置配置参数</a>
	</div>
	<div id="boll" class="boll"></div>
	<div id="target" class="target"></div>

	<script>
		var bool = new Parabola({
			el: "#boll",
			offset: [500, 100],
			duration: 500,
			curvature: 0.005,
			callback:function(){
				alert("完成后回调")
			},
			stepCallback:function(x,y){
				
				$("<div>").appendTo("body").css({
					"position": "absolute",
					"top": this.$elTop + y + 'px',
					"left":this.$elLeft + x + 'px',
					"background-color":"#CDCDCD",
					"width":"5px",
					"height":"5px",
					"border-radius": "5px"
				});
				
			}
		});
		$("#reset").click(function (event) {
			event.preventDefault();
			bool.reset();
		});
		$("#run").click(function (event) {
			event.preventDefault();
			bool.start();
		});
		$("#stop").click(function (event) {
			event.preventDefault();
			bool.stop();
		});
		$("#setOptions").click(function (event) {
			event.preventDefault();
			bool.setOptions({
				targetEl: $("#target"),
				curvature: 0.001,
				duration: 1000
			});
		});
</script>
	</script>
 </body>
</html>
